<template>
	<div class="table-container">
		<el-tabs v-if="!onlyImage" v-model="search.EnumFileType" type="card" @tab-click="handleClick">
			<el-tab-pane label="全部" name="-1"></el-tab-pane>
			<el-tab-pane v-for="item in EnumFileType" :key="item.Value.toString()" :label="item.Label"
				:name="item.Value.toString()">
			</el-tab-pane>
		</el-tabs>
		<SysFileListPartial :visibleChange="visibleChange" :isChoice="isChoice" :isChoiceMany="isChoiceMany"
			:onlyImage="onlyImage" v-on="$listeners">
		</SysFileListPartial>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import SysFileListPartial from "@/System/Partial/SysFileList/SysFileListPartial";

	export default {
		name: "SysFileList",
		mixins: [common.baseVM],
		components: {
			SysFileListPartial
		},
		props: {
			isChoice: {
				type: Boolean,
				default: false
			},
			isChoiceMany: {
				type: Boolean,
				default: false
			},
			onlyImage: {
				type: Boolean,
				default: false
			},
			visibleChange: {
				type: Boolean,
				default: false
			}
		},
		watch: {},
		computed: {
			classObj() {
				return {
					mobile: this.device === "mobile",
				};
			},
			EnumFileType() {
				return this.emptyArray(EnumFileType);
			}
		},
		data() {
			return {
				button: {
					删除: true,
					修改文件名: true,
				},
				loading: false,
				list: [],
				total: 0,
				search: {
					index: 1,
					size: 10,
					EnumFileType: "-1"
				}
			}
		},
		methods: {
			init() {
				if (this.onlyImage) {
					this.search.EnumFileType = "0";
				}
				this.getList();
			},
			handleClick() {
				this.getList();
			},
			getList() {
				var post = this.getSearchData();
				this.loading = true;
				this.post('api/System/SysFileList', post).then(data => {
					for (var i = 0; i < data.Result.length; i++) {
						var item = data.Result[i];
						item.SysFileName2 = item.SysFileName;
						item.Edit = false;
					}
					this.list = data.Result;
					this.total = data.Total;
					this.loading = false;
				}).catch(error => {
					this.loading = false;
				});
			}
		}
	}
</script>
<style scoped="scoped">
</style>
